<template>
  <div class='intro-swiper-content'>
    <!--    :autoplay="{ delay: 5000,disableOnInteraction: false}"-->
    <swiper :slidesPerView='1' :spaceBetween='0' :loop='true' :centeredSlides='true' :pagination='{clickable: true}'
            :autoplay='false' :navigation='true' :modules='modules' class='mySwiper'>
      <swiper-slide v-for='(item, index) in picList' :key='index'>

        <div class='swiper-con'>
          <div class='swiper-info'>
            <span class='title'>{{ item.productName }}</span>
            <p class='detail' v-if='index===0'>{{ item.beforeD }}<span
              class='fontweight'>{{ item.count }}</span>{{ item.detail }}</p>
            <p class='detail' v-else>{{ item.detail }}</p>
          </div>
          <div class='swiper-item'>
            <img :src='item.imgUrl' alt='' />
          </div>

        </div>

      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup lang='ts'>
import { defineProps, ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需光伏组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
//默认滑动效果（这里面注释掉的可以不要）

const countdownRef = ref(null)

/*@swiper="onSwiper"*/
const onSwiper = (swiperInstance) => {
  resetCountdownPosition(swiperInstance)
  swiperInstance.on('slideChange', () => {
    console.log('切换图片了')
    resetCountdownPosition(swiperInstance)
  })
}

const resetCountdownPosition = (swiperInstance) => {
  countdownRef.value.style.transform = 'translateX(-0%)'
  /*  countdownRef.value.style.width = '50%'*/
}
const onSlideChange = e => {
  // swiper切换的时候执行的方法
  console.log('slide change', e.activeIndex)
}

const modules = [Autoplay, Pagination, Navigation, A11y]


// eslint-disable-next-line vue/no-setup-props-destructure
const props = defineProps({
  picList: {
    type: Array,
    required: true,
    default: () => []
  }
})


onMounted(() => {

})
</script>

<style scoped lang='scss'>
.intro-swiper-content {
  height: 100%;
  .mySwiper {
    width: 100%;
    height: 100%;
    .swiper-con {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      height: 100%;
    }
    .swiper-item{
      transition: all 0.3s ease;
      height: 100%;
      display: flex;
      padding-top: 56px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .swiper-info {
      width: calc(100% - 1028px);
      position: absolute;
      top: 223px;
      right: -59px;

      span.title {
        display: block;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 36px;
        color: #000000;
        line-height: 50px;
        letter-spacing: 4px;
        text-align: left;
        font-style: normal;
      }

      p.detail {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #959595;
        line-height: 26px;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        width: 70%;
        display: inline-block;
        padding-top: 46px;

        span.fontweight {
          color: rgba(0, 0, 0, 1);
        }
      }
    }

    .swiper-slide {
      display: flex;
    }

    .swiper-item > img {
      transition: all 0.3s ease;
      object-fit: cover;
      width: 1028px;
      height: 486px;
      background-position: center;


    }


  }
}



@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}


</style>

<style lang='scss' scoped>

//
::v-deep .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  border-radius: inherit;
  width: 100%;
  height: 2px;
  margin: 0px !important;
  position: relative;

  &::after {
    content: "";
    width: 2px;
    height: 9px;
    display: block;
    position: absolute;
    right: 0;
    background-color: #fff;
    top: -3px;

  }

  &:last-child:after {
    display: none;
  }
}

::v-deep .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(255, 29, 29) !important;
}

::v-deep .swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  z-index: 10;
  width: 15.03%;
  display: flex;
  left: 1230px;
  transform: translate(-50%, 50%);
  top: 539px;
  height: 2px;
}

::v-deep .swiper-button-prev {
  position: absolute;
  left: 76.3%;
  top: 74%;
  opacity: 1;

  &::after {
    width: 14px !important;
    height: 26px !important;
    font-size: 20px;
    color: #000000;
  }

  &:hover {
    opacity: 1;
    color: rgba(255, 29, 29, 1);
  }
}

::v-deep .swiper-button-next {
  position: absolute;
  left: 80.66%;
  top: 74%;
  opacity: 1;

  &::after {
    width: 14px !important;
    height: 26px !important;
    font-size: 20px;
    color: #000000;
  }

  &:hover {
    opacity: 1;
    color: rgba(255, 29, 29, 1);
  }
}


</style>
